<template>
  <div>
    <el-dialog title="选择题库" :visible="true" with="60%" top="10px" :close-on-click-modal="false" :before-close="close">
      <el-form size="mini" :model="bank" :inline="true">
        <!-- <el-form-item label="题库分类"><edu-cascader :options="config.category.options" :value.sync="cascader" :args="config.category.args" /></el-form-item> -->
        <el-form-item label="启用状态"><edu-select :options="config.status.options" :value.sync="bank.status" :args="{}" /></el-form-item>
        <el-form-item label="题库名称"><el-input v-model="bank.title" placeholder="请输入题库名称关键字" /></el-form-item>
        <el-form-item><el-button @click="search">搜索</el-button></el-form-item>
      </el-form>
      <el-table v-loading.lock="loading" :data="datas" style="width: 100%" height="400" row-key="id" @selection-change="handleSelectChange">
        <el-table-column type="selection" min-width="50" :selectable="checkSelectable" />
        <el-table-column prop="title" label="题库名称" />
        <!-- <el-table-column prop="cates" label="所属分类" /> -->
        <el-table-column prop="status" label="启用状态" width="96">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next,jumper" :total="total" @current-change="handleCurrentChange" />
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" @click="choose">确认</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import EduCascader from '@public/form/cascader.vue';
import EduSelect from '@public/form/select.vue';
import { mapGetters } from 'vuex';
export default {
  components: {
    // EduCascader,
    EduSelect
  },
  props: {
    partIndex: {
      type: Number,
      required: true
    },
    cateIds: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      response: null, // 列表返回数据
      cascader: null, // 筛选的分类
      loading: true,
      // 题库筛选数据
      bank: {
        title: '',
        category: '',
        status: ''
      },
      // 分页
      paginate: {
        count: 16,
        page: 1
      },
      // 配置信息
      config: {
        category: {
          options: [],
          args: {
            tigger: 'hover'
          }
        },
        status: {
          options: []
        }
      },
      // 选中的题库
      banks: []
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    },
    ...mapGetters({
      parts: 'examPaper/random/parts'
    })
  },
  // watch: {
  //   cascader: {
  //     handler(datas) {
  //       const value = datas;
  //       const [val] = [...value].reverse();
  //       this.$set(this.bank, 'category', val);
  //     },
  //     deep: true
  //   }
  // },
  created() {
    this.loadData();
    this.$http.get(
      '/exam/admin/question/bank/choose',
      {},
      response => {
        this.$set(this.config.status, 'options', response.data);
      },
      _ => {},
      false
    );
  },

  methods: {
    // 加载数据方法
    loadData: function() {
      this.loading = true;
      var param = {};
      if (this.cateIds) {
        param = { cate: this.cateIds };
      }
      this.$http.get(
        '/exam/admin/question/bank/getChooseList',
        {
          ...this.paginate,
          ...this.bank,
          ...param
        },
        response => {
          this.response = response;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    // 分页
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    // 搜索
    search: function() {
      this.paginate.page = 1;
      this.loadData();
    },
    // 单行选中与取消事件
    handleSelectChange: function(selection) {
      this.banks = selection;
    },
    checkSelectable(row) {
      let result = true;
      this.parts.forEach(part => {
        if (part.banks.findIndex(item => item.id == row.id) !== -1) {
          result = false;
          return false;
        }
      });

      return result;
    },
    close() {
      this.$emit('close');
    },
    choose() {
      const part = this.parts[this.partIndex];
      const { banks } = part;
      const newBanks = [].concat(banks);
      this.banks.forEach(bank => {
        // 检测是否已经选中了该试题
        if (this.checkSelectable(bank)) {
          newBanks.push({
            ...bank,
            topics: {
              question_type_1: 0,
              question_type_2: 0,
              question_type_3: 0,
              question_type_4: 0,
              question_type_5: 0,
              question_type_6: 0,
              question_type_7: 0,
              question_type_8: 0
            }
          });
        }
      });
      const data = {
        ...part,
        banks: newBanks
      };
      console.log(part, banks, data);
      this.$store.dispatch('examPaper/random/setPart', {
        partIndex: this.partIndex,
        data
      });
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.bank-title {
  margin-right: 10px;
}
</style>
